import React, { Component } from "react";
import PageHeader from "../components/PageHeader";
import Bg from "../components/Bg";
import "../assets/css/AddressAdmin.css";
import login from "../hooks/loginInfo";
import AddressItem from "../components/AddressItem";
import Loading from "../components/Loading";

class AddressAdmin extends Component {
  constructor(props) {
    super(props);

    this.state = {
      token: null,
      addressList: null,
    };
    this.ToAddAddress = this.ToAddAddress.bind(this);
  }

  ToAddAddress() {
    this.props.history.push("/addAddress");
  }

  componentWillMount() {
    var loginInfo = login();
    this.$axios
      .get("/findAddress", {
        params: {
          tokenString: loginInfo.token,
        },
      })
      .then((res) => {
        this.setState({
          addressList: res.data.result,
        });
      });
  }

  render() {
    return this.state.addressList ? (
      <div className="AddressAdmin">
        <PageHeader>
          <span slot="title">地址管理</span>
        </PageHeader>
        {this.state.addressList.length === 0 ? (
          <div className="cart_none">
            <div className="cart_none_empty">
              <img src={require("../assets/images/empty.png").default} alt="" />
              <span>暂无地址信息，立即添加一个吧！</span>
            </div>
            <button
              className="cart_none_btn"
              onClick={() => this.props.history.push("/addAddress")}
            >
              添加地址
            </button>
          </div>
        ) : (
          <div>
            <Bg>
              {this.state.addressList && (
                <ul className="address_list">
                  {this.state.addressList.map((item) => {
                    return (
                      <AddressItem
                        edit={true}
                        key={item.id}
                        item={item}
                      ></AddressItem>
                    );
                  })}
                </ul>
              )}
            </Bg>
            <button className="addAddress_btn" onClick={this.ToAddAddress}>
              新增地址
            </button>
          </div>
        )}
      </div>
    ) : (
      <Loading></Loading>
    );
  }
}

export default AddressAdmin;
